<template>
  <div>

    <div class="i-layout-page-header">
      <PageHeader :title="$route.meta.title" class="product_tabs" hidden-breadcrumb>
        <div slot="content">
          <Tabs v-model="contentTab" type="line" @on-click="onChangeContentTab">
            <TabPane label="常用" name="common" />
          </Tabs>
        </div>
      </PageHeader>
    </div>

    <div class="public-box">
      <div class="public-item" v-for="(item, index) in List " :key="index">
        <Card>
          <div class="public-box-item-img card-cover">
            <img :src="item.goods_img">
          </div>
          <div class="card-body">
            <div class="card-meta" style="text-align: center; height: 80px;">
              <div class="card-meta-title">
                {{item.take_goods}}
              </div>
              <div class="card-meta-description">
                {{item.description}}
              </div>
              <div class="cardItemContent">
                <Button type="primary" @click="handleJump(item)">立即创作</Button>
              </div>
            </div>
          </div>
        </Card>
      </div>
    </div>

  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'content_New',
  data () {
    return {
      contentTab: 'common',
      List: [],
    }
  },
  computed: {
    ...mapState('admin/layout', [
      'isMobile'
    ]),
    labelWidth () {
      return this.isMobile ? undefined : 75
    },
    labelPosition () {
      return this.isMobile ? 'top' : 'right'
    }
  },
  created () {
    this.onChangeContentTab('common')
  },
  methods: {
    handleJump (item) {
      if (item.url) {
        window.open(url, '_blank')
      } else {
        let routeData = this.$router.resolve({ name: item.name })
        window.open(routeData.href, '_blank')
      }
    },

    // 切换选项卡
    onChangeContentTab (name) {
      switch (name) {
        case 'common':
          this.List = [
            {
              take_goods: '写文章',
              goods_img: 'https://img.alicdn.com/imgextra/i3/289589474/O1CN01y8saX42Jr8wp26uQa_!!289589474.jpg',
              description: 'Markdown编辑器',
              url: false,
              name: 'content_article_NewMarkdown',
            },
            {
              take_goods: '写文章',
              goods_img: 'https://img.alicdn.com/imgextra/i3/289589474/O1CN01y8saX42Jr8wp26uQa_!!289589474.jpg',
              description: '富文本编辑器',
              url: false,
              name: 'content_article_NewRichText',
            },
            // {
            //   take_goods: '写文章（富文本编辑器网页版）',
            //   goods_img: 'https://img.alicdn.com/imgextra/i3/289589474/O1CN01y8saX42Jr8wp26uQa_!!289589474.jpg',
            //   description: '写博客',
            //   url: 'http://soyul.com/article/new/ckeditor',
            // },
          ];
          break;
        case 'short_video':
          this.List = [

          ];
          break;
        case 'content':
          this.List = [

          ];
          break;
        case 'other':
          this.List = [

          ];
          break;
      }




    },
  }
}
</script>

<style scoped>
.public-box {
  display: flex;
  margin-top: 15px;
}
.public-item {
  padding: 13px;
  display: flex;
}
.ivu-card-body {
  padding: 16px;
  width: 246px;
  height: 386px;
}
.public-box-item-img img {
  width: 242.48px;
  height: 224.48px;
}

.card-body {
  padding: 24px;
  zoom: 1;
}
.card-meta-title {
  overflow: hidden;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.card-meta-description {
  color: rgba(0, 0, 0, 0.45);
  height: 44px;
  overflow: hidden;
  line-height: 22px;
  width: 196px;
}
.cardItemContent {
  display: -webkit-box;
  padding-top: 3px;
}
.ivu-.ivu-card-body {
  padding: 0 !important;
}
.ivu-btn-primary {
  width: 195px;
}
.w-list {
  text-align: center;
  width: 200px;
}
</style>
